import React, { Component } from 'react'
import _ from 'underscore'
import { Link } from 'react-router'

import Loading from './loading.jsx'

export default class MainView extends Component {
  constructor() {
    super()

    // data: [1,2,4,5,6,7,9]
    this.state = {
      data: {
        loading: true
      }
    }
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        data: {
          data: [1, 2, 4, 5, 6, 7, 9]
        }
      })
    }, 3000);
  }

  // shouldComponentUpdate() {
  //   return false;
  // }

  clickHandler() {
    let index = 2
      , newValue = Date.now() % 9;

    // this.setState({
    //   data: {
    //     data: [
    //       ...this.state.data.data.slice(0, index),
    //       newValue,
    //       ...this.state.data.data.slice(index + 1)
    //     ]
    //   }
    // })

    this.state.data.data[index] = newValue;
    this.forceUpdate()
  }

  renderBody() {
    return (
      <div>
        {
          _.map(this.state.data.data, (v, i) => <div key={i} style={{ color: v % 2 === 0 ? 'red' : 'green' }}>{v}</div>)
        }
      </div>
    )
  }

  render() {
    return (
      <div>
        <button onClick={this.clickHandler.bind(this)}>Update</button>
        <Link to="/detail">Detail</Link>
        <a href="#/detail">Detail2</a>
        {
          this.state.data.loading
            ? <Loading />
            : this.renderBody()
        }
      </div>
    )
  }
}


[
  department,dele,v
]

[{
  code : "contacts-menu",
  name : "通讯录菜单"
}]

[{
  groupId: 2,
  groupname : "通讯录",
  operations : [
    {
  code : "contacts-menu",
  name : "通讯录菜单"
}
  ]
}]
